// pages/details/spellDetail.js
const app = getApp()
import Api from '../../utils/api';
import util from '../../utils/util';

// let timerClear;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    timerClear:null,
    closePhotosAlbumFlag: false, //首次弹出访问相册授权窗口
    id: '', //拼团模板id
    goodsInfo: {}, //商品信息
    goodsBanner: [], //商品轮播
    page: 1,
    size: 10,
    spellList: [], //拼团列表
    popupSpell: false, //
    numTotal: 0, //
    shareViewOpen: false, // 分享框显示标识
    userInfo: {}, //用户信息
    _productImg: "",
    portrait_temp: "", //头像
    wxName: null, //昵称
    bgPath: '/img/money-img.png', //背景
    qrcode_temp: '/img/qr.png', //二维码
    huiImg: '/img/hui-img01.png',
    commentBgImg: '/img/share_bk1.png',
    showDialog: false,
    windowWidth: 375,
    windowHeight: 603,
    commentPage: 1, //评价起始页
    commentSize: 1, //评价每页显示大小
    commentList: [], //评价列表
    commentTotalNum: 0, //评价总条数
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let _this = this;
    //options.id = "1153115101004435456";
    if (options.id != undefined) {
      _this.setData({
        id: options.id
      })
      _this.spellDetail();
    };
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    let _this = this;
    wx.createSelectorQuery().select('.canvas-box').boundingClientRect(function(rect) {
      if (rect.width >= 375) {
        _this.setData({
          windowWidth: 375, // 节点的宽度
          windowHeight: 603 // 节点的高度
        })
      } else {
        _this.setData({
          windowWidth: 320, // 节点的宽度
          windowHeight: 504 // 节点的高度
        })
      }

    }).exec()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    var _this = this;
    _this.querySpellList();
    if (this.data.loginFlag) {
      this.spellDetail();
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
    clearInterval(this.data.timerClear);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (options) {
    app.globalData.otherPageHideFlag = true;
    console.log('拼团分享===用户点击右上角分享', app.globalData.otherPageHideFlag)
    console.log(options, '=========店铺')
    var that = this;
    var shareObj = {
      title: that.data.goodsInfo.newest.title,
      path: 'pages/details/spellDetail?id=' + that.data.id + '&title=' + JSON.stringify(that.data.goodsInfo.newest.title),
    }
    setTimeout(function() {
      that.setData({
        shareViewOpen: false
      })
    }, 2000)
    // 来自页面内的按钮的转发
    // if (options.from == 'button') {

    return shareObj;
  },

  //获取详情页信息
  spellDetail() {
    let _this = this;
    Api.spellDetail(_this.data.id).then(res => {
      console.log("获取详情页信息", res)
      let nodes = res.data.newest.detailImage
        .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img class="phos" $1 ')
      _this.setData({
        goodsInfo: res.data,
        goodsBanner: JSON.parse(res.data.newest.image),
        ['goodsInfo.newest.detailImage']: nodes
      })
      _this.queryGoodsComment(res.data.newestId);
    })
  },

  //查询拼团队伍
  querySpellList() {
    let _this = this;
    Api.querySpellList(_this.data.id, _this.data.page, _this.data.size).then(res => {
      console.log(res)
      _this.setData({
        spellList: res.data.dataList,
        numTotal: res.data.numTotal
      })
      if (_this.data.spellList.length > 0) {
       var timerClear = setInterval(function() {
          _this.data.spellList.forEach((item, index, arr) => {
            //console.log()
            if (util.getTimeLeft(_this.data.goodsInfo.duration + item.createTime) < 0) {
              let dataTime = {
                days: "00",
                hours: "00",
                minutes: "00",
                seconds: "00"
              }
              arr[index].mssTime = dataTime;
              clearInterval(_this.data.timerClear);
              arr.splice(index, 1)
              _this.setData({
                spellList: arr
              })
              //_this.searchSpike();
              return;
            } else {
              arr[index].mssTime = util.getTimeLeft(_this.data.goodsInfo.duration + item.createTime)
              _this.setData({
                spellList: arr
              })
            }
          })

        }, 1000)
        _this.setData({
          timerClear:timerClear
        })
      } else {
        //console, log("没有列表数据")
      };
    })
  },

  //查看全部拼团列表
  showSpellListClick() {
    let _this = this;
    _this.setData({
      popupSpell: true,
    })
  },
  //关闭弹出框
  hideSpellListClick() {
    let _this = this;
    _this.setData({
      popupSpell: false,
    })
  },
  /**
   * 点击分享
   */
  share: function() {
    var _this = this;
    _this.setData({
      shareViewOpen: !_this.data.shareViewOpen,
      userInfo: wx.getStorageSync("userInfo")
    })
  },

  /**
   * 分享事件
   */
  shareImage(event) {
    var _this = this;
    wx.showLoading({
      title: '加载中',
    });
    // 获取头像到本地 ，做分享绘制图片用（网络图片无法绘制）  
    wx.downloadFile({
      url: _this.data.userInfo.avatarUrl,
      success(res) {
        if (res.statusCode === 200) {
          _this.setData({
            portrait_temp: res.tempFilePath
          });

          //下载商品图片到本地（网络图片canvas无法绘制） - 热销
          wx.downloadFile({
            url: _this.data.goodsInfo.newest.defaultImage,
            success: (res) => {
              _this.setData({
                _productImg: res.tempFilePath
              });
              wx.hideLoading();
              if (_this.data.portrait_temp == '' && _this.data._productImg == '') {
                return;
              }

              //下载小程序码到本地（网络图片canvas无法绘制） - 
              wx.downloadFile({
                url: _this.data.goodsInfo.miniCode,
                success: (res) => {
                  _this.setData({
                    qrcode_temp: res.tempFilePath
                  });
                  wx.hideLoading();
                  if (_this.data.portrait_temp == '' && _this.data._productImg == '' && _this.data.qrcode_temp == '') {
                    return;
                  }
                  _this.setData({
                    wxName: _this.data.userInfo.nickName,
                    shareViewOpen: !_this.data.shareViewOpen
                  })
                  //缓存canvas绘制小程序二维码
                  _this.drawImage();
                  wx.hideLoading();
                  setTimeout(function() {
                    _this.canvasToImage()
                  }, 200)
                },
              });

            },
          });
        }
      }
    });
  },
  drawImage() {
    var _this = this;
    var bgPath = _this.data.bgPath
    // var portraitPath = _this.data.portrait_temp
    var hostNickname = _this.data.wxName
    var productImg = _this.data._productImg
    var _spPrice = _this.data.goodsInfo.spellPrice
    var _spName = _this.data.goodsInfo.newest.title
    var qrPath = _this.data.qrcode_temp
    let huiImg = _this.data.huiImg
    var w = _this.data.windowWidth
    var h = _this.data.windowHeight
    console.log(w, h);
    //绘制canvas图片     
    const ctx = wx.createCanvasContext('myCanvas')
    if (w < 375) {
      console.log('375~~~~~~~~~~~~~~~~~~~~~~~~~');
      ctx.setFillStyle('white');
      ctx.save()
      ctx.beginPath()
      ctx.fillRect(0, 0, _this.data.windowWidth, _this.data.windowHeight);
      ctx.arc(50, 35, 25, 0, 2 * Math.PI)
      ctx.fill()
      ctx.clip()
      ctx.drawImage(_this.data.portrait_temp, 25, 10, 50, 50)
      ctx.restore()
      // //生成用户ID 微信名
      ctx.setFillStyle('#999999')
      ctx.setFontSize(12)
      ctx.setTextAlign('left')
      ctx.fillText(hostNickname, 100, 22)
      // // 文字
      ctx.setFillStyle('#000000')
      ctx.setFontSize(16)
      ctx.setTextAlign('left')
      ctx.fillText('我正在拼团，你来也加入吧', 100, 50)

      //生成商品图片
      ctx.drawImage(productImg, 25, 65, 270, 270)

      //商品名称
      ctx.setFillStyle('#666666')
      ctx.setFontSize(14)
      ctx.setTextAlign('left')
      if (_spName.length > 15) {
        _spName = _spName.substring(0, 15);
        _spName += '...';
        console.log(_spName)
      }
      ctx.fillText(_spName, 25, 360)

      //1.0拼图人数
      var startX = 20;
      ctx.setFillStyle('#FF154C')
      ctx.setFontSize(24)
      ctx.setTextAlign('left')
      var spellNumContext = this.data.goodsInfo.limitedSpellNum + "人团";
      ctx.fillText(spellNumContext, startX, 390)
      //1.1计算拼团人数宽度
      var spellNumWidth = ctx.measureText(spellNumContext).width + 18;
      startX += spellNumWidth;
      //2.0金钱符号
      ctx.setFillStyle('#FF154C')
      ctx.setFontSize(18)
      ctx.setTextAlign('left')
      var posterContent = "¥";
      ctx.fillText(posterContent, startX, 390)
      //2.1计算金钱符宽度
      var posterWidth = ctx.measureText(posterContent).width;
      startX += posterWidth;
      //2.2商品价格
      ctx.setFillStyle('#FF154C')
      ctx.setFontSize(24)
      ctx.setTextAlign('left')
      var priceContext = _spPrice + '';
      ctx.fillText(priceContext, startX, 390)
      //2.2计算商品价格宽度
      var priceWidth = ctx.measureText(priceContext).width;
      startX += priceWidth;
      //3.0计量单位
      if (this.data.goodsInfo.newest.unit) {
        var weight = this.data.goodsInfo.newest.weight ? this.data.goodsInfo.newest.weight : '';
        var unit = this.data.goodsInfo.newest.unit;
        ctx.setFillStyle('#a8a8a8')
        ctx.setFontSize(18)
        ctx.setTextAlign('left')
        var unitContext = "/" + weight + unit;
        var unitWidth = ctx.measureText(unitContext).width;
        if (unitWidth > (220 - startX)) {
          unitContext = unitContext.substring(0, 5) + '...';
        }
        ctx.fillText(unitContext, startX, 390)
      }
      //底下背景
      ctx.drawImage(this.data.commentBgImg, 0, 430, w, h - 400);
      // //绘制二维码
      ctx.drawImage(qrPath, 220, 335, 80, 80)
      // //点击识别查看商品
      ctx.setFillStyle('#333333')
      ctx.font = 'normal bold 18px sans-serif';
      ctx.setTextAlign('right')
      ctx.fillText('长按识别小程序码', w - 20, 430)
      //生成惠生活图片
      //ctx.drawImage(huiImg, 0, 440, 320, 40)
      ctx.setFillStyle('#999999')
      ctx.setFontSize(15)
      ctx.setTextAlign('right')
      ctx.fillText('超值好货一起拼', w - 20, 450)
      ctx.draw();
      return;
    }
    //绘制背景图片
    //ctx.setStrokeStyle('#fff')
    ctx.setFillStyle('white');
    ctx.save()
    ctx.beginPath()
    ctx.fillRect(0, 0, _this.data.windowWidth, _this.data.windowHeight);
    ctx.arc(50, 35, 25, 0, 2 * Math.PI)
    ctx.fill()
    ctx.clip()
    ctx.drawImage(_this.data.portrait_temp, 25, 10, 50, 50)
    ctx.restore()
    // //生成用户ID 微信名
    ctx.setFillStyle('#999999')
    ctx.setFontSize(12)
    ctx.setTextAlign('left')
    ctx.fillText(hostNickname, 100, 22)
    // // 文字
    ctx.setFillStyle('#000000')
    ctx.setFontSize(16)
    ctx.setTextAlign('left')
    ctx.fillText('我正在拼团，你来也加入吧', 100, 50)
    //生成商品图片
    ctx.drawImage(productImg, 25, 80, 327.5, 327.5)
    //商品名称
    ctx.setFillStyle('#666666')
    ctx.setFontSize(14)
    ctx.setTextAlign('left')
    if (_spName.length > 18) {
      _spName = _spName.substring(0, 18);
      _spName += '...';
      console.log(_spName)
    }
    ctx.fillText(_spName, 25, 430)
    //1.0拼图人数
    var startX = 20;
    ctx.setFillStyle('#FF154C')
    ctx.setFontSize(24)
    ctx.setTextAlign('left')
    var spellNumContext = this.data.goodsInfo.limitedSpellNum + "人团";
    ctx.fillText(spellNumContext, startX, 470)
    //1.1计算拼团人数宽度
    var spellNumWidth = ctx.measureText(spellNumContext).width + 18;
    console.log(spellNumWidth);
    startX += spellNumWidth;
    console.log('spellNumWidth', startX);
    //2.0金钱符号
    ctx.setFillStyle('#FF154C')
    ctx.setFontSize(18)
    ctx.setTextAlign('left')
    var posterContent = "¥";
    ctx.fillText(posterContent, startX, 470)
    //2.1计算金钱符宽度
    var posterWidth = ctx.measureText(posterContent).width;
    startX += posterWidth;
    console.log("posterWidth", startX);
    //2.2商品价格
    ctx.setFillStyle('#FF154C')
    ctx.setFontSize(24)
    ctx.setTextAlign('left')
    var priceContext = _spPrice;
    ctx.fillText(priceContext + '', startX, 470)
    //2.2计算商品价格宽度
    var priceWidth = ctx.measureText(priceContext + '').width;
    startX += priceWidth;
    console.log('priceWidth', startX);
    //3.0计量单位
    if (this.data.goodsInfo.newest.unit) {
      var weight = this.data.goodsInfo.newest.weight ? this.data.goodsInfo.newest.weight : '';
      var unit = this.data.goodsInfo.newest.unit;
      ctx.setFillStyle('#a8a8a8')
      ctx.setFontSize(18)
      ctx.setTextAlign('left')
      var unitContext = "/" + weight + unit;
      var unitWidth = ctx.measureText(unitContext).width;
      if (unitWidth > (270 - startX)) {
        unitContext = unitContext.substring(0, 8) + '...';
      }
      ctx.fillText(unitContext, startX, 470)
    }
    //底下背景
    ctx.drawImage(this.data.commentBgImg, 0, 490, w, h-440);
    // //绘制二维码
    ctx.drawImage(qrPath, 270, 420, 80, 80)
    // //点击识别查看商品
    ctx.setFillStyle('#333333')
    ctx.font = 'normal bold 18px sans-serif';
    ctx.setTextAlign('right')
    ctx.fillText('长按识别小程序码', w - 20, 520)
    //宣传语
    ctx.setFillStyle('#999999')
    ctx.setFontSize(15)
    ctx.setTextAlign('right')
    ctx.fillText('超值好货一起拼', w - 20, 540)

    //生成惠生活图片
    //ctx.drawImage(huiImg, 0, 530, 375, 40)

    ctx.draw();
  },
  canvasToImage() {
    var _this = this
    console.log()
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: _this.data.windowWidth * 2,
      height: _this.data.windowHeight * 2,
      destWidth: _this.data.windowWidth * 2,
      destHeight: _this.data.windowHeight * 2,
      canvasId: 'myCanvas',
      success: function(res) {
        console.log('朋友圈分享图生成成功:' + res.tempFilePath)
        _this.setData({
          shareImgSrc: res.tempFilePath,
          showDialog: true,
        })
        // wx.previewImage({
        //   current: 'www.ooago.com', // 当前显示图片的http链接
        //   urls: [res.tempFilePath] // 需要预览的图片http链接列表
        // })
      },
      fail: function(err) {
        console.log('失败')
        console.log(err)
      }

    })
  },

  //关闭弹出框
  colseClick() {
    let _this = this;
    // _this.setData({
    //   showDialog: false
    // })
  },
  //长按保存图片
  /**
   * 保存图片
   */
  save: function() {
    //wx.saveImageToPhotosAlbum将图片保存到本地  3
    var _this = this;
    console.log("保存图片")
    wx.saveImageToPhotosAlbum({
      filePath: _this.data.shareImgSrc,
      success(res) {
        console.log(111)
        wx.hideLoading();
        wx.showModal({
          title: '存图成功',
          content: '图片成功保存到相册了，去发朋友圈噻~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function(res) {
            if (res.confirm) {
              _this.setData({
                showDialog: false
              })
              console.log('用户点击确定');
            }
          }
        })
      },
      fail(err) {
        console.log(err, _this.data.closePhotosAlbumFlag, '_this.data.closePhotosAlbumFlag')
        // 用户点击授权访问相册的取消按钮
        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
          console.log('saveImageToPhotosAlbum：失败函数')
          if (_this.data.closePhotosAlbumFlag) {
            wx.showModal({
              title: '您已限制访问相册',
              content: '是否重新授权？',
              success: function(res) {
                if (res.confirm) {
                  wx.openSetting({
                    success(settingdata) {
                      console.log(settingdata)
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                        wx.showToast({
                          title: '获取权限成功',
                          icon: 'success',
                          duration: 2000,
                        })
                      } else {
                        console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                        wx.showToast({
                          title: '获取权限失败！',
                          icon: 'none',
                          duration: 2000,

                        })
                      }
                    },
                    fail(error) {
                      console.log(error)
                    }

                  })
                } else if (res.cancel) {
                  wx.showToast({
                    title: '已取消重新授权',
                    icon: 'none'
                  })
                  return
                }
              }
            })
          } else {
            console.log('用户点击授权访问相册的取消按钮')
          }
          _this.setData({
            closePhotosAlbumFlag: true
          })

        }
      }
    })
  },
  //查询商品评论
  queryGoodsComment(goodsId) {
    var _this = this;
    //组装查询条件
    let data = {
      goodsId: goodsId,
      isDel: false,
    };
    //请求数据
    Api.queryGoodsComment(this.data.commentPage, this.data.commentSize, data).then(res => {
      console.log('商品评论', res)
      _this.setData({
        commentList: res.data.dataList,
        commentTotalNum: res.data.numTotal
      });
    });
  },
  //查看全部评论
  searchAllClick(e) {
    console.log(e.currentTarget.dataset.goodsid)
    let id = e.currentTarget.dataset.goodsid;
    wx.navigateTo({
      url: `/pages/comment/comment?goodsId=${id}`
    })
  },
  // 绘出页面到盆友圈页面关闭事件
  closeShare: function() {
    this.setData({
      showDialog: false
    })

  }
})